<script setup>
import { ref } from 'vue';

// 模拟热门专辑数据
const trendingAlbums = ref([
  { title: 'Midnight Memories', artist: 'Luna Ray', cover: 'https://picsum.photos/300/300?random=1' },
  { title: 'Electric Dreams', artist: 'Neon Pulse', cover: 'https://picsum.photos/300/300?random=2' },
  { title: 'Acoustic Sessions', artist: 'Maya Johnson', cover: 'https://picsum.photos/300/300?random=3' },
  { title: 'Urban Stories', artist: 'City Beats', cover: 'https://picsum.photos/300/300?random=4' },
  { title: 'Ocean Waves', artist: 'Serene Sounds', cover: 'https://picsum.photos/300/300?random=5' },
  { title: 'Rock Revolution', artist: 'The Amplifiers', cover: 'https://picsum.photos/300/300?random=6' },
]);

// 播放状态管理
const nowPlaying = ref(null);
const isPlaying = ref(false);

const playAlbum = (album) => {
  nowPlaying.value = album;
  isPlaying.value = true;
};

const togglePlay = () => {
  if (nowPlaying.value) {
    isPlaying.value = !isPlaying.value;
  }
};
</script>

<template>
  <div class="flex flex-col min-h-screen bg-gray-900 text-white">
    <!-- 导航栏 -->
    <header class="bg-black/70 sticky top-0 z-10">
      <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="text-2xl font-bold text-green-500">PopMusical</div>
        <ul class="hidden md:flex space-x-8">
          <li><a href="#discover" class="hover:text-green-400 transition-colors">发现</a></li>
          <li><a href="#library" class="hover:text-green-400 transition-colors">我的音乐库</a></li>
          <li><a href="#radio" class="hover:text-green-400 transition-colors">电台</a></li>
        </ul>
        <div class="flex items-center space-x-4">
          <button class="text-xl hover:text-green-400 transition-colors">🔍</button>
          <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full transition-colors">登录</button>
        </div>
      </nav>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
      <!-- 英雄区域 -->
      <section class="relative rounded-xl overflow-hidden mb-12">
        <div class="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40 z-10"></div>
        <img src="https://picsum.photos/1200/400?random=1" alt="音乐背景" class="w-full h-64 md:h-80 object-cover"/>
        <div class="absolute inset-0 z-20 flex flex-col justify-center px-8">
          <h1 class="text-4xl md:text-5xl font-bold mb-4">发现你喜爱的音乐</h1>
          <p class="text-gray-300 text-lg mb-6 max-w-lg">千万首歌曲，个性化推荐，尽在PopMusical</p>
          <button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-full w-fit transition-colors">立即聆听</button>
        </div>
      </section>

      <!-- 热门专辑 -->
      <section id="discover" class="mb-12">
        <h2 class="text-2xl font-bold mb-6">热门推荐</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
          <div v-for="album in trendingAlbums" :key="album.title" class="album-card cursor-pointer" @click="playAlbum(album)">
            <img :src="album.cover" :alt="album.title"/>
            <div class="album-info">
              <div class="album-title">{{ album.title }}</div>
              <div class="album-artist">{{ album.artist }}</div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部播放器 -->
    <footer class="bg-black py-4 border-t border-gray-800">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between">
          <!-- 当前播放信息 -->
          <div class="flex items-center space-x-4 w-1/3">
            <div v-if="nowPlaying" class="w-12 h-12">
              <img :src="nowPlaying.cover" alt="Now playing" class="w-full h-full object-cover rounded"/>
            </div>
            <div v-else class="text-gray-400">
              <div class="font-medium">No song playing</div>
              <div class="text-sm">Select a song to start listening</div>
            </div>
          </div>

          <!-- 播放控制 -->
          <div class="flex flex-col items-center w-1/3">
            <div class="flex items-center space-x-6 mb-2">
              <button class="text-gray-400 hover:text-white transition-colors">⏮️</button>
              <button class="text-2xl bg-white text-black w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 transition-colors" @click="togglePlay">
                {{ isPlaying ? '⏸️' : '▶️' }}
              </button>
              <button class="text-gray-400 hover:text-white transition-colors">⏭️</button>
            </div>
            <div class="w-full">
              <div class="h-1 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-green-500 w-1/4"></div>
              </div>
              <div class="text-xs text-gray-400 mt-1 flex justify-between">0:00 / 3:45</div>
            </div>
          </div>

          <!-- 音量控制 -->
          <div class="w-1/3 flex justify-end">
            <div class="flex items-center space-x-2">
              <button class="text-gray-400 hover:text-white transition-colors">🔊</button>
              <div class="w-24 h-1 bg-gray-700 rounded-full overflow-hidden">
                <div class="h-full bg-gray-400 w-3/4"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 全局样式已在 style.css 中定义 */
</style>
